<%@ page language="java" contentType="text/html; charset=UTF-8"
     pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core"  prefix="c" %>
<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta name="keywords" content="jquery,ui,easy,easyui,web">
	<meta name="description" content="easyui help you build your web page easily!">
	<title>Project Demo</title>
	<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">
	<link rel="stylesheet" type="text/css" href="easyui/demo/demo.css">
	<script type="text/javascript" src="easyui/jquery.min.js"></script>
	<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
	<title>Project Management</title>
	<style type="text/css">
		#fm{
			margin:0;
			padding:10px 30px;
		}
		.ftitle{
			font-size:14px;
			font-weight:bold;
			padding:5px 0;
			margin-bottom:10px;
			border-bottom:1px solid #ccc;
		}

		.fitem{
			margin-bottom:5px;
			
		}

		.fitem label{
			display:inline-block;
			width:80px;
			vertical-align:text-top;
		}
	</style>
	
	<script type="text/javascript">
	
	    $(document).ready(function() {
	    	$("#slectFlowId").combobox({  
	    		url:'getAllFlow', valueField:'id', textField:'name', panelHeight:'auto',
	    	    onSelect: function selectTrigger(record) {
	    	    	var projectName = $("input[name='name']").val();
	    			var projectId = $("input[name='projectId']").val();
	    			var version = $("input[name='version']").val();
	    			var startTime = $("input[name='startTime']").val();
	    			var endTime = $("input[name='endTime']").val();
	    	    	var form = {
	    				flowId : record.id,
	    				name : projectName,
	    				projectId : projectId,
	    				version : version,
	    				endTime : new Date(endTime),
						startTime : new Date(startTime)
						
	    			};
	    			$.ajax({
	    			     url: 'loadTemplateFlow',
	    			     data: JSON.stringify(form) ,
	    			     dataType : "json",
	    			     contentType: "application/json;charset=UTF-8",
	    			     type: "POST",
	    			     success: function(data) {
	    		    	 	var userId = $("input[name='userId']").val();

	    		    	 	var tmpStart = new Date(data.startTime);
	    		    	 	var tmpEnd = new Date(data.endTime);
	    		    	 	delete data.startTime;
	    		    	 	delete data.endTime;
	    		    	 	$("#fm").form('load', data);
	    		    	 	$("input[name='startTime']").val(tmpStart);
	    		    	 	$("input[name='endTime']").val(tmpEnd);

	    		    	 	$("input[name='userId']").val(userId);
	    					$("#fm .dynamic").remove();
	    					$.each(data.nodeList, function(index, entry) {
	    						$("#fm").append("<fieldset class='dynamic'> <input name='nodeList[" + index + "].id' type='hidden' value='" + entry.id + "'/> <legend>" + entry.nodeName + "</legend>" + 
	    								"<input name='nodeList[" + index + "].nodeName' type='hidden' value='" + entry.nodeName + "'/>"
	    								+ "<div class='fitem'> <label>Project Node WorkLoad:</label> <input name='nodeList[" + index + "].planWorkLoad' class='easyui-validatebox' required='true' value='"+ entry.planWorkLoad  + "'></div>"
	    								+ "<div class='fitem'> <label>Designer User Id:</label> <input id='selectUserId_" + index + "' name='nodeList[" + index + "].userId' class='easyui-combobox'/> </div>"  
	    								+ "</fieldset>");
	    						$("#selectUserId_" + index).combobox({
	    							url: 'getAllUser',
	    							valueField:'userID',  
	    						    textField:'userName',
	    						    method: 'GET'
	    						});
	    					});
	    			     }
	    			});
	    		}
	    	}); 
	    });
	    
	    function selectProject() {
	    	$("#dlgSelectProject").dialog('open').dialog('setTitle','Select Project'); 
	    }
		
	    function confirmSelectProject() {
	    	var selected = $('#projectList').datagrid('getSelected');
	    	if (selected) {
	    		$("input[name='projectId']").val(selected.projectID);
	    		$("input[name='name']").val(selected.projectName);
	    	}
	    	$('#dlgSelectProject').dialog('close'); 
	    }

		function editProject() {

		}
		
		function saveProject(){  
		    $('#fm').form('submit',{  
		        url: 'createProject',  
		        onSubmit: function(param){ 
		        	
		        	
		        	
		            return $(this).form('validate');  
		        },  
		        success: function(result){  
		        	$('#dlg').dialog('close');      // close the dialog  
		            $('#dg').datagrid('reload');    // reload the user data  
		        }  
		    });  
		} 
		
		</script>
	
</head>
<body>
    <div id="header"> <h2>Project Management </h2> </div>
	
	<div id="mainwrap" class="easyui-layout" style="width:2000px;height:800px;">
		
		<div id="side" data-options="region:'west',split:true" title="management" style="width:550px;height:300px" >
		
			<table id="dg" title="All Projects User: ${user.userName}" class="easyui-datagrid"
				style="width: 550px; height: 250px" url="getAllProjects"
				toolbar="#toolbar" rownumbers="true" fitColumns="true"
				singleSelect="true">
				<thead>
					<tr>
						<th field="flowId" width="50">Flow Id</th>
						<th field="currentNodeId" width="50">Node Id</th>
						<th field="originatorId" width="50">Originator Id</th>
						<th field="name" width="50">Project Name</th>
					</tr>
				</thead>
			</table>
			<div id="toolbar">
				<!-- <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newProject()">New Project</a> --> 
				<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editProject()">Edit Project</a> 
				<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="destroyProject()">Remove Project</a>
			</div>
		
		</div>
		
		<div id="main" data-options="region:'center',title:'Data Show'">
		
			<div id="data" class="easyui-panel" title="project form" 
				style="width: 600px; height: 650px; padding: 10px 20px"
				buttons="#dlg-buttons">
				<div class="ftitle">Project Information</div>
				<form id="fm" method="post">
					<div class="fitem">
					    <label for="flowId">Flow Id:</label> 
					    <input id="slectFlowId" class="easyui-combobox" name="flowId" />  
					           
					</div>
					<div class="fitem">
						<label><a href="#" class="easyui-linkbutton" style="width:auto" iconCls="icon-tip" onclick="selectProject()" >Select</a></label> 
					</div>
					<div class="fitem">
						<label>Project ID:</label> 
						<input name="projectId" class="easyui-validatebox" required="true">
					</div>
					<div class="fitem">
						<label>Project Name:</label> 
						<input name="name" class="easyui-validatebox" required="true">
					</div>
					<div class="fitem">
						<label>Version:</label> 
						<input name="version" class="easyui-validatebox" required="true">
					</div>
					<div class="fitem">
						<label>Start Time</label> 
						<input name="startTime" type="text" data-options="" class="easyui-datetimebox" required style="width:150px">  
					</div>
					<div class="fitem">
						<label>End Time</label> 
						<input name="endTime" type="text" data-options="" class="easyui-datetimebox" required style="width:150px">  
					</div>
					
					<div class="fitem">
						<label>Comment</label> 
						<textarea name="comment" cols="50" rows="3"></textarea>  
					</div>
					 
					<input name="userId" class="easyui-validatebox" value="${user.userID}" type="text">

				</form>
				<div id="dlg-buttons">
					<a href="#" class="easyui-linkbutton" iconCls="icon-ok" onclick="saveProject()">Save</a> 
		    	</div>
			</div>
			
			
		
		</div>
	</div>
	
	<div id="dlgSelectProject"  class="easyui-dialog"  style="width:400px;height:280px;padding:10px 20px" closed="true" buttons="#dlgSelectProject-buttons" > 
		<table id="projectList" class="easyui-datagrid" title="Project Selection" 
            data-options="url:'getProjectList'" singleSelect="true">  
	        <thead>  
	            <tr>  
	                <th data-options="field:'projectID'" width='50'>Item ID</th>  
	                <th data-options="field:'projectName'" width='50'>Product</th>  
	            </tr>  
	        </thead>  
    	</table>             
	</div>
    <div id="dlgSelectProject-buttons">  
        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-ok" onclick="confirmSelectProject()">Save</a>  
        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlgSelectProject').dialog('close')">Cancel</a>  
    </div> 
	
	<div id="footer">
		
	</div>
</body>
</html>

